<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>Settlement</title>
	<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>

</head>
<style>
	div.buyPageDiv {
		margin: 20px auto;
		max-width: 1013px;
	}

	div.address {
		margin: 20px 5px;
		text-align: left;
	}

	div.addressTip,
	div.productListTip {
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		text-align: left;
		margin-bottom: 30px;
	}

	table.addressTable {
		margin: 20px 20px;
		width: 600px;
		font-size: 16px;
	}

	table.addressTable td {
		color: #333333;
		text-align: right;
		vertical-align: top;
		padding-right: 5px;
		text-align: left;
		height: 30px;
	}

	table.addressTable td.firstColumn {
		width: 100px;
	}

	table.addressTable td textarea {
		border: 1px solid #AFAFAF;
		margin-bottom: 10px;
		width: 400px;
	}

	table.addressTable td input {
		border: 1px solid #AFAFAF;
		width: 200px;
	}

	span.redStar {
		color: red;
		font-size: 8px;
	}

	div.buyPageDiv {
		margin: 20px auto;
		max-width: 1013px;
	}

	div.addressTip,
	div.productListTip {
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		text-align: left;
		margin-bottom: 30px;
	}

	table.productListTable {
		width: 100%;
		border-collapse: separate;
		font-size: 16px;
	}

	table.productListTable th {
		color: #999999;
		font-family: 宋体;
		font-weight: normal;
		font-size: 16px;
		text-align: center;
		padding-bottom: 5px;
	}

	table.productListTable tr.rowborder td {
		background-color: #b2d1ff;
		border-right: 2px solid #fff;
		height: 3px;

	}

	th.productListTableFirstColumn {
		text-align: left !important;
	}

	img.tmallbuy {
		width: 15px;
	}

	a.marketLink {
		color: black;
		font-size: 16px;
		font-family: 宋体;
		font-weight: normal;
	}

	a.marketLink:hover {
		color: black;
		font-size: 16px;
		text-decoration: underline;
		font-family: 宋体;
		font-weight: normal;
	}

	span.wangwangGif {
		display: inline-block;
		width: 25px;
		height: 25px;
		background-image: url(http://how2j.cn/tmall/img/site/wangwang.gif);
		background-repeat: no-repeat;
		background-color: transparent;
		background-attachment: scroll;
		background-position: -83px -0px;
		position: relative;
		top: 8px;
		left: 2px;
	}

	tbody.productListTableTbody td {
		text-align: center;
	}

	tbody.productListTableTbody td.orderItemFirstTD {
		text-align: left;
	}
	.splicing{
	}

	tr.orderItemTR td {
		border-bottom: 1px solid #E5E5E5;
	}

	tr.orderItemTR td {
		padding: 10px 0px;
	}

	img.orderItemImg {
		width: 120px;
		height: 120px;
		border: 1px solid #E9E9E9;
	}

	td.orderItemProductInfo {
		text-align: left !important;
	}

	td.orderItemProductInfo img {
		height: 16px;
	}

	a.orderItemProductLink {
		color: #666666;
		display: block;
	}

	a.orderItemProductLink:hover {
		color: #666666;
		text-decoration: underline;
	}

	span.orderItemProductPrice,
	span.orderItemProductNumber {
		color: #000000;
	}

	span.orderItemUnitSum {
		color: #CC0000;
		font-weight: bold;
	}

	td.orderItemFirstTD,
	td.orderItemLastTD {
		border-bottom: 0px solid black !important;
	}

	label.orderItemDeliveryLabel {
		color: #666666;
		font-family: 宋体;
		font-size: 16px;
		font-weight: normal;
	}

	select.orderItemDeliverySelect {
		width: 100px;
		height: 23px;
	}

	div.orderItemSumDiv {
		padding: 20px;
		border-top: 2px solid #B4D0FF;
		background-color: #F2F6FF;
	}

	div.orderItemSumDiv span {
		color: #999999;
	}

	span.leaveMessageText {
		display: inline-block;
		margin-right: 10px;
		float: left;
	}

	div.orderItemTotalSumDiv {
		margin: 40px;
		height: 40px;
	}

	div.submitOrderDiv {
		height: 40px;
		margin: 20px 0px;
	}

	div.orderItemTotalSumDiv span {
		color: #999999;
	}

	span.orderItemTotalSumSpan {
		color: #C40000 !important;
		font-size: 22px;
		font-weight: bold;
		border-bottom: 1px dotted #F2F6FF;
	}

	button.submitOrderButton {
		border: 1px solid #C40000;
		background-color: #C40000;
		text-align: center;
		line-height: 40px;
		font-size: 14px;
		font-weight: 700;
		color: white;
		float: right;
		display: inline-block;
		margin: 0px 10px;
		width: 180px;
		height: 40px;
	}

	.leaveMessageTextarea {
		border: 1px solid #C3B345;
	}

	body {
		font-size: 16px;
		font-family: Arial;
	}

	a {
		color: #999;
	}

	.redColor {
		color: #C40000 !important;
	}

	nav.top {
		background-color: #f2f2f2;
		padding-top: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #e7e7e7;
	}

	nav.top span,
	nav.top a {
		color: #999;
		margin: 0px 10px 0px 10px;
	}

	nav.top a:hover {
		color: #C40000;
		text-decoration: none;
	}

	.tmall-logo-img {
		margin-top: 290px;
		float: left;
		position: absolute;
	}

	div.searchDiv input {
		width: 475px;
		border: 1px solid transparent;
		height: 36px;
		margin: 1px;
		outline: none;
	}

	div.searchDiv button {
		width: 110px;
		border: 1px solid transparent;
		background-color: #C40000;
		color: white;
		font-size: 20px;
		font-weight: bold;
	}

	div.searchBelow {
		margin-top: 3px;
		margin-left: -20px;
	}

	div.searchBelow span {
		color: #999;
	}

	div.searchBelow a {
		padding: 0px 20px 0px 20px;
		font-size: 14px;
	}

	body {
		font-size: 16px;
		font-family: Arial;
	}

	a {
		color: #999;
	}

	a:hover {
		text-decoration: none;
		color: #C40000;
	}

	div.footer {
		margin: 0px 0px;
		border-top-style: solid;
		border-top-width: 1px;
		border-top-color: #e7e7e7;
	}

	div.footer_ensure {
		margin-top: 24px;
		margin-bottom: 24px;
		text-align: center;
	}

	div.footer_desc {
		border-top-style: solid;
		border-top-width: 1px;
		border-top-color: #e7e7e7;
		padding-top: 30px;
		margin: 0px 20px;
	}

	div.footer_desc div.descColumn {
		width: 20%;
		float: left;
		padding-left: 15px;
	}

	div.footer_desc div.descColumn span.descColumnTitle {
		color: #646464;
		font-weight: bold;
		font-size: 16px;
	}

	div.footer_desc a {
		display: block;
		padding-top: 3px;
	}

	div.copyright {
		background-color: black;
		border-top-style: solid;
		border-top-width: 2px;
		border-top-color: #C40000;
	}

	div.copyright span.slash {
		color: white;
	}

	div.footer div.copyright div.white_link a {
		color: white;
		padding: 0px 5px;
	}

	div.footer div.copyright div.white_link {
		padding: 10px 0px;
		margin-left: 10px;
	}

	div.license {
		margin-left: 10px;
		padding-bottom: 30px;
	}

	div.license span {
		color: #A4A4A4;
	}

	div.license div.copyRightYear {
		margin: 10px 0px;
		color: #686868;
	}
</style>
<script>

</script>

<body>
	<div class="buyPageDiv">
		<div class="buyFlow">
			<img src="./images/biaoti(1).png" style="height: 60px;" class="pull-left">
			<img src="http://how2j.cn/tmall/img/site/buyflow.png" class="pull-right">
			<div style="clear:both"></div>
		</div>
		<div class="address">
			<div class="addressTip">输入收货地址</div>
			<div>
				<table class="addressTable">
					<tbody>
					<tr>
						<td class="firstColumn">详细地址<span class="redStar">*</span></td>
						<td><textarea placeholder="建议您如实填写详细收货地址，例如接到名称，门牌好吗，楼层和房间号等信息" name="address"></textarea>
						</td>
					</tr>
					<tr>
						<td>收货人姓名<span class="redStar">*</span></td>
						<td><input type="text" placeholder="长度不超过25个字符" name="receiver"></td>
					</tr>
					<tr>
						<td>手机号码 <span class="redStar">*</span></td>
						<td><input type="text" placeholder="请输入11位手机号码" name="mobile"></td>
					</tr>
					<tr>
						<td>会员编号 <span class="redStar">*</span></td>
						<td><input type="text" placeholder="您不是会员" name="number"></td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div class="buyPageDiv">
		<div class="productList">
			<div class="productListTip">确认订单信息</div>
			<table class="productListTable">
				<thead>
				<tr>
					<th class="productListTableFirstColumn" colspan="2">

						<a href="#nowhere" class="marketLink">伟哥超市</a>
						<a href="#nowhere" class="wangwanglink"> <span class="wangwangGif"></span> </a>
					</th>
					<th>单价</th>
					<th>数量</th>
					<th>小计</th>
				</tr>
				<tr class="rowborder">
					<td colspan="2"></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				</thead>
				<tbody class="productListTableTbody">
				<select class="orderItemDeliverySelect">
					<option>送货上门</option>
					<option>上门取货</option>
				</select>

				</tbody>
			</table>
			<div class="orderItemSumDiv" style="height: 50px;">
				<div class="pull-left">
					<span class="leaveMessageText">给卖家留言:</span>
					<span>
						<img src="http://how2j.cn/tmall/img/site/leaveMessage.png" class="leaveMessageImg">
					</span>
					<span class="leaveMessageTextareaSpan" style="display: none;">
						<textarea rows="3" cols="30" class="leaveMessageTextarea" name="userMessage"></textarea>
						<div>
							<span>还可以输入200个字符</span>
						</div>
					</span>
				</div>
				<span class="pull-right">店铺合计(含运费): ￥152.25</span>
			</div>
		</div>
		<div class="orderItemTotalSumDiv">
			<div class="pull-right">
				<span>实付款：</span>
				<span class="orderItemTotalSumSpan">￥152.25</span>
			</div>
		</div>
		<div class="submitOrderDiv">
			<a ><button class="submitOrderButton" type="button" onclick="add()">提交订单</button></a>
		</div>
		<div style="display: block;" class="footer" id="footer">
			<div class="footer_ensure" id="footer_ensure">
				<a href="#nowhere">
					<img src="http://how2j.cn/tmall/img/site/ensure.png">
				</a>
			</div>
			<div class="footer_desc" id="footer_desc">
				<div class="descColumn">
					<span class="descColumnTitle">购物指南</span>
					<a href="#nowhere">免费注册</a>
					<a href="#nowhere">开通支付宝</a>
					<a href="#nowhere">支付宝充值</a>
				</div>
				<div class="descColumn">
					<span class="descColumnTitle">天猫保障</span>
					<a href="#nowhere">发票保障</a>
					<a href="#nowhere">售后规则</a>
					<a href="#nowhere">缺货赔付</a>
				</div>
				<div class="descColumn">
					<span class="descColumnTitle">支付方式</span>
					<a href="#nowhere">快捷支付</a>
					<a href="#nowhere">信用卡</a>
					<a href="#nowhere">蚂蚁花呗</a>
					<a href="#nowhere">货到付款</a>
				</div>
				<div class="descColumn">
					<span class="descColumnTitle">商家服务</span>
					<a href="#nowhere">商家入驻</a>
					<a href="#nowhere">商家中心</a>
					<a href="#nowhere">天猫智库</a>
					<a href="#nowhere">天猫规则</a>
					<a href="#nowhere">物流服务</a>
					<a href="#nowhere">喵言喵语</a>
					<a href="#nowhere">运营服务</a>
				</div>

			</div>
			<div style="clear:both"></div>
		</div>

	</div>

</body>
<script src="./js/axios.js"></script>
<script src="./js/vue.js"></script>
<script>
	let cardN;
	// 获取localStorage中的数据
	let selectedData = JSON.parse(localStorage.getItem('selectedData'));
	console.log(selectedData+"..................");
	/*console.log(selectedData);*/
	const urlParams = new URLSearchParams(window.location.search);
	const uname=urlParams.get('userName');
	const id=urlParams.get('userId');
	/*console.log(id+"++++++");
	console.log(urlParams+"++++++++++++++++++");*/
	show();

	// 获取当前时间
	var currentDate = new Date();
	var year = currentDate.getFullYear();
	var month = currentDate.getMonth() + 1;
	var day = currentDate.getDate();
	var hours = currentDate.getHours();
	var minutes = currentDate.getMinutes();
	var seconds = currentDate.getSeconds();

	var time = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);


	var amountText = document.querySelector('.orderItemTotalSumSpan').innerHTML;
	var money = selectedData[0].totalPrice1;
	console.log(money+"_________________");

	$(document).ready(function(){
		// 在页面加载完成后执行的函数
		console.log('页面加载完成');

		function addCad() {
			console.log(uname+"++++++.........");
			$.ajax({
				url: '../users?op=showMemberInfo',
				type: 'get',
				dataType: "json",
				data: {
					userName : uname
				},
				success: function (rs) {

						cardN = rs.data[0].cardNumber;
					console.log(cardN+"+++++++++++++?????good");
					document.getElementsByName("number")[0].value = cardN;
				},

			});
		}

		// 这里可以调用需要执行的函数
		addCad();
	});



	function add() {
		addTransaction();
		commit();//沙箱支付
		function addTransaction() {
			$.ajax({
				url: '../tran?op=add',
				type: 'get',
				dataType: 'json',
				data: {
					userId: id,
					transactionDate: time,
					transactionAmount: money,
					cardNumber: cardN
				},
				success: function (transactionId) {
					if (transactionId > 0) {
						alert('提交成功');
						selectedData.forEach(function (data) {
							let commodityName = data.commodityName;
							let quantity = data.quantity;
							let totalPrice = data.totalPrice;

							$.ajax({
								url: '../tran?op=addsale',
								type: 'get',
								dataType: 'json',
								data: {
									userId: id,
									saleDate: time,
									transactionId: transactionId,
									commodityName: commodityName,
									saleQuantity: quantity,
									saleAmount: totalPrice
								}
							});

							$.ajax({
								url: '../tran?op=downCard',
								type: 'get',
								dataType: 'json',
								data: {
									userId: id,
									saleDate: time,
									transactionId: transactionId,
									commodityName: commodityName,
									quantity: quantity,
									saleAmount: totalPrice
								}
							});
						});
					}
				},
				error: function (error) {
					console.error('交易请求出错：', error);
				}
			});
		}

		function commit(){
			// const _this = this;
			axios.get("../pay",{params:{total_amount:money}}).then(rs=>{
				window.open(rs.data);
			})
		}
	}






	function show() {
		$.ajax({
			url: '../user?op=find',
			type: 'get',
			dataType: "json",
			data: {
				userId:id
			},
			success: function (rs) {
				if (rs.code == 200) {
					console.log(rs);
					$('textarea[name="address"]').val(rs.data[0].userAddr);
					$('input[name="receiver"]').val(rs.data[0].userName);
					$('input[name="mobile"]').val(rs.data[0].usertel);
				}
		}
		})
	}



	document.querySelector('.submitOrderButton').addEventListener('click', function() {
		var address = document.querySelector('textarea[name="address"]').value;
		var receiver = document.querySelector('input[name="receiver"]').value;
		var mobile = document.querySelector('input[name="mobile"]').value;
		if (address.trim() === '' || receiver.trim() === '' || mobile.trim() === '') {
			alert('请填写完整的收货信息！');
		} else if (receiver.length > 25) {
			alert('收货人姓名长度不能超过25个字符！');
		} else if (!/^\d{11}$/.test(mobile)) {
			alert('请输入正确的11位手机号码！');
		} else {
			/*window.location.href = "./successto.html";*/
		}
	});

	selectedData.forEach(function(data) {
		$('.productListTableTbody').append('<tr class="orderItemTR">' +
				'<td class="orderItemFirstTD"><img width="20px" src="' + data.commodityPic + '" class="orderItemImg"></td>' +
				'<td class="orderItemProductInfo">' +
				'<a class="orderItemProductLink" href="#nowhere">' +
				data.commodityName +
				'</a>' +
				'<img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">' +
				'<img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">' +
				'<img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">' +
				'</td>' +
				'<td>' +
				'<span class="orderItemProductPrice">￥' + data.price + '</span>' +
				'</td>' +
				'<td>' +
				'<span class="orderItemProductNumber">' + data.quantity + '</span>' +
				'</td>' +
				'<td><span class="orderItemUnitSum">￥' + data.totalPrice + '</span></td>' +
				'</tr>');
	});
	// 获取总价元素，并插入数据
	$('.pull-right').html('店铺合计(含运费): ￥' + selectedData[0].totalPrice1);
	$('.orderItemTotalSumSpan').html('￥' + selectedData[0].totalPrice1);

</script>



</html>